<template>
  <div class="sult">
    <!-- 翻牌抽奖 -->
    <LotteryA
      :cardType="cardType"
      :logId="logId"
      :id="id"
      v-if="cardType !== -1"
      @closeA="handlerA"
    ></LotteryA>

    <!-- 卡未集齐 -->
    <div class="type1_1" v-if="!iscomplete"></div>
    <div class="type1_2" v-if="!iscomplete">
      <div class="con_play1">
        <div class="btn_play1" @click="getCard" v-if="canPlay"></div>
        <div class="btn_play1_2" v-if="!canPlay"></div>
      </div>
      <p class="tit_got"></p>
      <CardList v-if="cardArr[0].count > -1" :cardArr="cardArr"></CardList>
      <div class="btn_share" @click="goShare"></div>
      <div class="btn_rule" @click="ruleShow = true">活动规则</div>
      <p class="pdemo">活动Demo，仅用学习</p>
    </div>

    <!-- 集齐4类-->
    <div class="type2_1" v-if="iscomplete"></div>
    <div class="type2_2" v-if="iscomplete">
      <div class="empty"></div>
      <!-- 出现抽千元大奖 -->
      <LotteryB
        :cstatus="fstatusB"
        :untickets="untickets"
        @changeStatusB="handlerStatusB(arguments)"
        @getCounpon="handlerCoupon(untickets[0].id)"
      ></LotteryB>

      <p class="tit_got" v-if="fstatusB === 0"></p>
      <CardList v-if="fstatusB === 0" :cardArr="cardArr"></CardList>

      <!-- 抽锦鲤大奖 -->
      <LotteryC
        :cstatus="fstatusC"
        :untickets="untickets"
        @changeStatusC="handlerStatusC(arguments)"
        @getCounpon="handlerCoupon(untickets[1].id)"
        v-if="fstatusB > 0"
      ></LotteryC>

      <div class="tit_card" v-if="fstatusB > 0"></div>
      <div class="btn_share" @click="goShare">分享好友抽锦鲤大奖</div>
      <div class="btn_rule" @click="ruleShow = true">活动规则</div>
      <p class="pdemo">活动Demo，仅用学习</p>
    </div>

    <Rule v-show="ruleShow"></Rule>
    
    <div class="fixed" v-show="isfixed"></div>
  </div>
</template>

<script>
import CardList from "../components/CardList.vue";
import LotteryA from "../components/LotteryA.vue";
import LotteryB from "../components/LotteryB.vue";
import LotteryC from "../components/LotteryC.vue";
import Rule from "../components/Rule.vue";

export default {
  name: "sult",
  components: {
    Rule,
    CardList, // 已获得的福卡列表
    LotteryA, // 翻牌抽奖
    LotteryB, // 抽千元大奖
    LotteryC, // 抽锦鲤大奖
  },
  metaInfo() {
    return {
      meta: [
        {
          name: "Alipay:link",
          content: `https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/index.html?shareId=${this.id}`,
        },
      ],
    };
  },

  data() {
    return {
      loading: {}, //加载中
      ruleShow: false,
      iscomplete: false, //是否集齐
      cardArr: [
        { name: "安康福", count: -1 },
        { name: "新星福", count: -1 },
        { name: "能量福", count: -1 },
        { name: "畅行福", count: -1 },
      ],
      remain: 1, //剩余抽福卡机会
      untickets: this.$CONF.untickets, // 页面的券对象
      ontickets: [], // 接口获取的已领取的券id
      fstatusB: 0, //家族团圆奖的抽取
      fstatusC: 0, //参与了锦鲤奖的抽取
      uid: "",
      id: -1,
      isfixed: false,
      cardType: -1, // 抽到的卡类型
      logId: -1, //抽福卡记录ID
    };
  },

  computed: {
    // 还有没有机会抽卡
    canPlay: function () {
      // !0:true  !1:false
      return this.iscomplete ? !1 : this.remain > 0;
    },
  },

  methods: {
    // 定位处理
    isArea() {
      if (!this.$CONF.areaArr.length && !this.$CONF.lotteryArea) return;
      // 如果活动不需要限制地区且抽奖接口不需要传省市 以下js终止执行
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });
      this.$TOOL
        .location()
        .then((res) => {
          this.loading.clear();
          this.pro = this.$TOOL.formatArea(res.pro);
          this.city = this.$TOOL.formatArea(res.city);

          if (this.$CONF.areaArr.length === 0) return;
          // 如果活动不需要限制地区，以下js终止执行

          let locationArr = [],
            isHave = false;
          locationArr.push(this.$TOOL.formatArea(res.pro));
          locationArr.push(this.$TOOL.formatArea(res.city));
          locationArr.map((item) => {
            this.$CONF.areaArr.indexOf(item) > -1 && (isHave = true);
          });

          if (!isHave) {
            // this.$router.replace("home");
            return;
          }
        })
        .catch((msg) => {
          this.loading.clear();
          if (this.$CONF.areaArr.length === 0) return;
          this.$toast(msg.message);
          // this.$router.replace("home");
        });
    },

    // 获取用户信息
    getUserInfo() {
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });
      this.$http({
        method: "get",
        url: `${this.$CONF.baseUrl}getUserInfo.jsp`,
      })
        .then((res) => {
          let data = res.data;
          console.log(data);
          if (data.code === 1) {
            this.uid = data.uid;
            this.id = data.id;
            this.ontickets = data.ticketIds;
            this.remain = data.remainLotteryTime;
            this.cardArr[0].count = data.cardNum1;
            this.cardArr[1].count = data.cardNum2;
            this.cardArr[2].count = data.cardNum3;
            this.cardArr[3].count = data.cardNum4;
            this.iscomplete = data.isComplete;

            // "status1":0,				//家族团圆奖抽取状态  0未参加、1不中奖、2中奖
            // "status2":0,				//锦鲤奖抽取状态  0未参加、1不中奖、2中奖

            if (data.status1 === 2) {
              // 中奖是否领了
              this.ontickets.indexOf(this.untickets[0].id) === -1
                ? (this.fstatusB = 5)
                : (this.fstatusB = 2);
            } else if (data.status1 === 1) {
              // 没中奖
              this.fstatusB = 4;
            } else {
            }

            if (data.status2 === 2) {
              // 中奖是否领了
              this.ontickets.indexOf(this.untickets[1].id) === -1
                ? (this.fstatusC = 5)
                : (this.fstatusC = 2);
            } else if (data.status2 === 1) {
              // 没中奖
              this.fstatusC = 4;
            } else {
            }

            data.isPlay1 &&
              this.ontickets.indexOf(this.untickets[0].id) > -1 &&
              (this.fstatusB = 2);

            data.isPlay2 &&
              this.ontickets.indexOf(this.untickets[1].id) > -1 &&
              (this.fstatusC = 2);
          } else {
            data.msg && this.$toast(data.msg);
            // this.$router.replace("home");
          }
          this.loading.clear();
        })
        .catch((err) => {
          this.loading.clear();
          this.$toast("网络错误，请稍后再试");
          // this.$router.replace("home");
        });
    },

    updateCard() {
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 100, // 无限时长loading
      });
      let flag = !0;
      this.cardArr.map((item) => {
        item.count === 0 && (flag = !1);
      });
      flag && (this.iscomplete = true);
      console.log(this.iscomplete);
    },

    // 抽副卡
    getCard() {
      // this.loading = this.$toast.loading({
      //   message: "加载中...",
      //   duration: 0, // 无限时长loading
      // });

      this.$http({
        method: "post",
        url: `${this.$CONF.baseUrl}getCard.jsp`,
      })
        .then((res) => {
          // this.loading.clear();
          let data = res.data;

          switch (data.code) {
            case -1:
              // this.$router.replace("home");
              break;
            case 1:
              this.cardType = data.cardType;
              this.cardArr[this.cardType - 1].count++;
              this.logId = data.logId;
              break;
            default:
              this.$toast(data.msg);
              break;
          }
        })
        .catch((err) => {
          // this.loading.clear();
          this.$toast("网络不佳，请稍后重试");
          // this.$router.replace("home");
        });
    },

    // 领券
    handlerCoupon(couponId) {
      this.$toast("测试，不可领");
      return;

      // 酷车领券接口加上format=js，代表酷车后端把领券链接挂载到window.couponJumpUrl上，然后再跳转
      let url = encodeURIComponent(`${this.$CONF.baseUrl}haveCoupon.jsp`);
      url = `https://merchant.pangku.com/client/getcoupon?coupon_id=${couponId}&uid=${this.uid}&callback=${url}&format=js`;

      let couponScript = document.createElement("script");
      couponScript.src = url;
      couponScript.onload = function () {
        AlipayJSBridge.call("pushWindow", {
          url: window.couponJumpUrl,
          param: {
            readTitle: true,
            showOptionMenu: false,
          },
        });
      };
      document.body.appendChild(couponScript);
    },

    // 接受子组件LotteryA传的数据改变status
    handlerA() {
      this.cardType = -1;
      this.updateCard();
    },

    // 接受子组件LotteryB传的数据改变status
    handlerStatusB(msg) {
      this.fstatusB = msg[0];
      console.log("handlerStatusB" + this.fstatusB);
    },

    // 接受子组件LotteryC传的数据改变status
    handlerStatusC(msg) {
      this.fstatusC = msg[0];
      console.log("handlerStatusC" + this.fstatusC);
    },

    // 领券回来
    showError(data, id) {
      this.$toast(data);
      if (!data) return false;
      if (data == "您已领取该优惠券，不能再领取了哦") {
        id === this.untickets[0].id && (this.fstatusB = 2);
        id === this.untickets[1].id && (this.fstatusC = 2);
      } else if (data == "领取成功") {
        id === this.untickets[0].id && (this.fstatusB = 2);
        id === this.untickets[1].id && (this.fstatusC = 2);
      } else {
      }
      this.$TOOL.delCookie("pcautoAlipay");
    },

    // 跳分享页
    goShare() {
      this.$router.push({ path: `/share/${this.id}` });
    },

    // 预加载未出现的图片
    loadImg: function () {
      let imgArr = [
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/card_0.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/card_1.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/card_2.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/card_3.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/card_bg.png",
        "https://www1.pcauto.com.cn/zt/gz202102/yf/zfb/static/img/share.jpg",
      ];
      imgArr.forEach(function (e) {
        let loadImg = new Image();
        loadImg.src = e;
      });
    },
  },

  mounted() {
    console.log(14348);
    let _this = this;
    setTimeout(() => {
      _this.loadImg();
    }, 1000);
    this.isArea();
    this.getUserInfo();

    this.$TOOL.ready(() => {
      //手机领券回退按钮 页面刷新处理
      document.addEventListener("resume", (event) => {
        this.getUserInfo();

        // let pcautoAlipay = _this.$TOOL.getCookie("pcautoAlipay");
        // if (!pcautoAlipay) return false;
        // pcautoAlipay = JSON.parse(pcautoAlipay);
        // _this.showError(
        //   decodeURI(pcautoAlipay.error_msg),
        //   decodeURI(pcautoAlipay.coupid)
        // );
      });
    });
  },
};
</script>

<style lang="scss">
.sult {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  .type1_1 {
    height: 3.16rem;
    background: url(../assets/images/type1_1.jpg) no-repeat center top / cover;
  }
  .type1_2 {
    height: 12.3rem;
    background: url(../assets/images/type1_2.jpg) no-repeat center top / contain;
    position: relative;
    margin-top: -1px;
    .con_play1 {
      .btn_play1 {
        width: 4.51rem;
        height: 0.96rem;
        background: url(../assets/images/btn_play1.png) no-repeat center top / contain;
        position: absolute;
        top: 5.52rem;
        left: 50%;
        margin-left: -2.25rem;
        animation: mscale 1.3s linear infinite;
      }
      .btn_play1_2 {
        width: 4.51rem;
        height: 0.96rem;
        background: url(../assets/images/btn_play1_2.png) no-repeat center top / contain;
        position: absolute;
        top: 5.52rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .tit_got {
      position: absolute;
      width: 4.52rem;
      height: 0.73rem;
      background: url(../assets/images/tit_got.png) no-repeat center top/contain;
      top: 6.9rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .btn_share {
      width: 5rem;
      height: 0.77rem;
      background: url(../assets/images/btn_share.png) no-repeat center top/contain;
      position: absolute;
      top: 10.25rem;
      left: 50%;
      transform: translateX(-50%);
    }
    .btn_rule {
      width: 1.25rem;
      height: 0.41rem;
      position: absolute;
      font-size: 0.28rem;
      line-height: 1.8;
      left: 50%;
      top: 11.22rem;
      color: #333;
      text-align: center;
      letter-spacing: 1px;
      border-bottom: 1px solid #333;
      transform: translateX(-50%);
    }
  }
  .type2_1 {
    height: 2.68rem;
    background: url(../assets/images/type2_1.jpg) no-repeat center top / cover;
  }
  .type2_2 {
    .empty {
      height: 100%;
      height: 0.3rem;
    }
    height: 14rem;
    background: url(../assets/images/type2_2.jpg) no-repeat center top / cover;
    position: relative;
    margin-top: -1px;
    .tit_card {
      width: 6.47rem;
      height: 4.5rem;
      background: url(../assets/images/tit_card.png) no-repeat center top / contain;
      margin: 0 auto 0.5rem;
    }

    .tit_got {
      width: 4.52rem;
      height: 0.73rem;
      background: url(../assets/images/tit_got.png) no-repeat center top/contain;
      margin: 0 auto;
    }
    .btn_share {
      width: 5rem;
      height: 0.77rem;
      background: url(../assets/images/btn_share2.png) no-repeat center top / contain;
      margin: 0 auto;
      font-size: 0.33rem;
      text-indent: 0.2rem;
      font-weight: 600;
      color: #fff;
      text-align: center;
      line-height: 0.77rem;
    }
    .btn_rule {
      width: 1.25rem;
      height: 0.41rem;
      font-size: 0.28rem;
      line-height: 1.8;
      color: #333;
      text-align: center;
      letter-spacing: 1px;
      border-bottom: 1px solid #333;
      margin: 0.2rem auto 0;
    }
  }
}

.pdemo {
  width: 100%;
  text-align: center;
  font-size: 0.28rem;
  position: absolute;
  top: 2.4rem;
}

.fixed {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
}

.van-toast {
  background-color: rgba(0, 0, 0, 0.9);
  font-size: 15px;
}

@keyframes mscale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>
